<template>
	<view class="dataform">
		<view class="title">
			<view class="title_search">
				<u-search placeholder="搜索商户名称、商户UID、门店ID" v-model="keyword" shape="square" @custom="getStatshoplist(true)"></u-search>
			</view>
			<view class="title_condition">
				<view @click="sortFun('order')" :class="shop.orderType=='order'?'light':''">
					<text>交易笔数</text>
					<view class="sort_icon" :class="shop.orderType=='order'?shop.direction:''"></view>
				</view>
				<view @click="sortFun('price')" :class="shop.orderType=='price'?'light':''">
					<text>交易金额</text>
					<view class="sort_icon" :class="shop.orderType=='price'?shop.direction:''"></view>
				</view>
			</view>
			<view class="content_title">
				<picker mode="date" @change="dateSel" :value="currentDate" :end="endDate">
					<view>
						<text>{{currentDate}}</text>
						<image src="../../static/img/my_back.png" mode=""></image>
					</view>
				</picker>
				<view>
					商户数:&nbsp;{{totalCount}}
				</view>
			</view>
		</view>
		<view class="main">
			<view v-if="shopList.length==0">
				<noData></noData>
			</view>
			<scroll-view v-else class="content" scroll-y="true" @scrolltolower="getStatshoplist(false)">
				<view class="content_list">
					<view class="list_item" v-for="(item,index) in shopList" :key="item.id">
						<view class="item_title">
							<view class="item_title_top">{{item.shop_name}}</view>
							<view class="item_title_id">
								<text>UID:&nbsp;&nbsp;{{item.uid}}</text>
								<text>门店ID:&nbsp;&nbsp;{{item.id}}</text>
							</view>
						</view>
						<view class="item_con">
							<view class="item_conEve">
								<view class="item_conEve_con">{{item.day_total}}</view>
								<view class="item_conEve_title">交易笔数</view>
							</view>
							<view class="item_conEve">
								<view class="item_conEve_con">{{item.day_amount}}</view>
								<view class="item_conEve_title">交易金额</view>
							</view>
						</view>
					</view>
				</view>
				<view style="text-align: center;" v-show="shop.isLoad">
					<u-loading mode="flower" size="40"></u-loading>
				</view>
			</scroll-view>
		</view>
		
		<!-- <view>
			<u-popup v-model="popData.show" mode="top">
				<view class="popNum">
					<view class="popNum_title">交易笔数等级</view>
					<view class="popNum_con">
						<view class="popNum_item" v-for="(item,index) in popData.data">{{item}}</view>
					</view>
				</view>
			</u-popup>
		</view> -->
	</view>
</template>

<script>
	import { statshoplist } from '../../api/index.js'
	import noData from '../../components/data/nodata.vue'
	export default {
		data() {
			return {
				currentDate:'',//当前选中的日期
				endDate:'', //结束日期
				shopList:[],
				shop:{
					shopstatus:0,
					page:1,
					limit:20,
					isLoad:false,//判断之前的请求是否还未结束
					isAll:false,//判断是否加载了全部数据
					orderType:'',//排序类型(交易笔数(order)/交易金额(price))
					direction:'' //升序/降序  asc/desc
				},
				keyword:'', //搜索的值
				totalCount:0  //商户数
				// popData:{
				// 	show:true,
				// 	data:[
				// 		'全部',
				// 		'0-5笔',
				// 		'6-10笔',
				// 		'11-20笔',
				// 		'20-100笔',
				// 		'100+笔',
				// 	]
				// },
			}
		},
		onLoad:function(data){
			this.endDate = this.currentDate = this.getDate({
			    format: true
			})
			this.getStatshoplist(true)
			
			// let text = '';
			// if(data.id == 'total'){
			// 	text = '全部交易数据统计'
			// }else if(data.id == 'waimai'){
			// 	text = '外卖交易数据统计'
			// }else if(data.id == 'scan'){
			// 	text = '扫码点餐数据统计'
			// }else if(data.id == 'card'){
			// 	text = '台卡交易数据统计'
			// }
			// uni.setNavigationBarTitle({
			//     title: text
			// });
		},
		methods: {
			async getStatshoplist(isSw){
				if(isSw){ //如果是加载第一页
					this.shop.isAll = false;
					this.shop.isLoad = false;
					this.shop.page = 1;
				}else{ //如果是列表加载逻辑
					if(this.shop.isLoad || this.shop.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
						console.log("请求未完成或者列表数据已经全部加载完毕")
						return ;
					}
					this.shop.isLoad = true;
				}
				
				let data = await statshoplist({
					"type": "day",
					"time": this.currentDate,
					"order_type": this.shop.orderType,
					"direction": this.shop.direction,
					"search": this.keyword,
					"page": this.shop.page,
					"limit": this.shop.limit
				});
				
				console.log(data)
				this.totalCount = data.data.count;
				let dealshoplist = data.data.list;//返回已处理的数据
				if(isSw === true){//判断是否重新加载数据
					this.shopList = dealshoplist;
				}else{
					this.shopList = this.shopList.concat(dealshoplist);
				}
				
				this.shop.page += 1;
				this.shop.isLoad = false;
				if(dealshoplist.length < this.shop.limit){
					this.shop.isAll = true;
				}
			},
			dateSel:function(e){
				this.currentDate = (e.target.value)
				this.getStatshoplist(true)
			},
			getDate:function(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate()-1;
			
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			sortFun:function(orderType){
				if(this.shop.isLoad){
					console.log("数据未加载完成")
				}else{
					this.shop.orderType = orderType;
					this.shop.direction == 'asc'?this.shop.direction = 'desc':this.shop.direction = 'asc',
					this.getStatshoplist(true)
				}
			},
			disDetail:function(item){
				uni.navigateTo({
					url: `../../view/dataformDetail/dataformDetail?id=${item.id}`
				});
			}
		},
		components:{
			noData
		}
	}
</script>

<style lang="scss" scoped>
	.dataform{
		height: 100%;
		background-color: #F5F5F5;
		position: relative;
		.title{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			border-top: 1rpx solid #EEEEEE;
			background-color: #FFFFFF;
			.title_search{
				padding: 20rpx;
			}
			.title_condition{
				color: #666666;
				display: flex;
				width: 100%;
				justify-content: space-around;
				padding-bottom: 20rpx;
				.light{
					color: #007AFF;
				}
			}
			.content_title{
				padding: 30rpx;
				background-color: #F5F5F5;
				display: flex;
				justify-content: space-between;
				color: #666666;
				image{
					margin-left: 10rpx;
					width: 20rpx;
					height: 20rpx;
					transform: rotate(90deg);
				}
			}
		}
		.main{
			height: 100%;
			.nodata{
				padding-top: 262rpx;
			}
			.content{
				padding: 0 30rpx;
				padding-top: 262rpx;
				height: 100%;
				box-sizing: border-box;
				.content_list{
					.list_item{
						background-color: #FFFFFF;
						border-radius: 10rpx;
						padding: 0 30rpx;
						margin-bottom: 24rpx;
						.item_title{
							padding: 20rpx 0;
							border-bottom: 1rpx solid #E5E5E5;
							.item_title_top{
								font-size: $uni-font-size-lg;
								font-weight: bold;
							}
							.item_title_id{
								font-size: $uni-font-size-sm;
								color: #999999;
								margin-top: 20rpx;
								text{
									margin-right: 30rpx;
								}
							}
						}
						.item_con{
							display: flex;
							.item_conEve{
								width: 50%;
								text-align: center;
								padding: 40rpx 0;
								.item_conEve_con{
									font-size: 44rpx;
									font-weight: bold;
								}
								.item_conEve_title{
									color: #999999;
									font-size: $uni-font-size-sm;
								}
							}
						}
					}
				}
			}
		}
		// .popNum{
		// 	.popNum_title{
		// 		padding: 30rpx;
		// 		color: #666666;
		// 	}
		// 	.popNum_con{
				
		// 		display: flex;
		// 						justify-content: space-around;
		// 						flex-direction: row;
		// 						flex-wrap: wrap;
		// 		.popNum_item{
		// 			width: 45%;
		// 			text-align: center;
		// 			background-color: #999999;
		// 			&.target{
						
		// 			}
		// 		}
		// 	}
		// }
	}
	.sort_icon{
		position: relative;
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
		margin-left: 4rpx;
		&.asc{
			&::before{
				border-bottom-color: #007AFF;
			}
		}
		&.desc{
			&::after{
				border-top-color: #007AFF;
			}
		}
		&::before{
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			top: -6rpx;
			left: 0;
			right: 0;
			border: 8rpx #999999 solid;
			border-top-color: transparent;
			border-left-color: transparent;
			border-right-color: transparent;
		}
		&::after{
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			top: 14rpx;
			left: 0;
			right: 0;
			border: 8rpx #999999 solid;
			border-bottom-color: transparent;
			border-left-color: transparent;
			border-right-color: transparent;
		}
	}
</style>
